<html>

<head>
  <meta charset="utf-8" />
  <title>Webfont Demo</title>
  <style>
    /*
KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
 */

    /** 清除内外边距 **/
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    p,
    blockquote,
    /* structural elements 结构元素 */
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    /* list elements 列表元素 */
    pre,
    /* text formatting elements 文本格式元素 */
    form,
    fieldset,
    legend,
    button,
    input,
    textarea,
    /* form elements 表单元素 */
    th,
    td

    /* table elements 表格元素 */
      {
      margin: 0;
      padding: 0;
    }

    /** 设置默认字体 **/
    body,
    button,
    input,
    select,
    textarea

    /* for ie */
      {
      font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 100%;
    }

    address,
    cite,
    dfn,
    em,
    var {
      font-style: normal;
    }

    /* 将斜体扶正 */
    code,
    kbd,
    pre,
    samp {
      font-family: courier new, courier, monospace;
    }

    /* 统一等宽字体 */
    small {
      font-size: 12px;
    }

    /* 小于 12px 的中文很难阅读，让 small 正常化 */

    /** 重置列表元素 **/
    ul,
    ol {
      list-style: none;
    }

    /** 重置文本格式元素 **/
    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }


    /** 重置表单元素 **/
    legend {
      color: #000;
    }

    /* for ie6 */
    fieldset,
    img {
      border: 0;
    }

    /* img 搭车：让链接里的 img 无边框 */
    button,
    input,
    select,
    textarea {
      font-size: 100%;
    }

    /* 使得表单元素在 ie 下能继承字体大小 */
    /* 注：optgroup 无法扶正 */

    /** 重置表格元素 **/
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    /* 清除浮动 */
    .ks-clear:after,
    .clear:after {
      content: '\20';
      display: block;
      height: 0;
      clear: both;
    }

    .ks-clear,
    .clear {
      *zoom: 1;
    }

    .main {
      padding: 30px 100px;
    }

    .main h1 {
      font-size: 36px;
      color: #333;
      text-align: left;
      margin-bottom: 30px;
      border-bottom: 1px solid #eee;
    }

    .helps {
      margin-top: 40px;
    }

    .helps pre {
      padding: 20px;
      margin: 10px 0;
      border: solid 1px #e7e1cd;
      background-color: #fffdef;
      overflow: auto;
    }

    .icon_lists li {
      float: left;
      width: 100px;
      height: 150px;
      text-align: center;
    }

    .icon_lists .icon {
      font-size: 42px;
      line-height: 100px;
      margin: 10px 0;
      color: #333;
      -webkit-transition: font-size 0.25s ease-out 0s;
      -moz-transition: font-size 0.25s ease-out 0s;
      transition: font-size 0.25s ease-out 0s;
    }

    .icon_lists .icon:hover {
      font-size: 100px;
    }

    @font-face {
      font-family: "webfont";
      font-display: swap;
      src: url('webfont.eot');
      /* IE9 */
      src: url('webfont.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('webfont.woff2') format('woff2'),
        url('webfont.woff') format('woff'),
        /* chrome、firefox */
        url('webfont.ttf') format('truetype'),
        /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('webfont.svg#webfont') format('svg');
      /* iOS 4.1- */
    }

    .web-font {
      font-family: "webfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  </style>
</head>

<body>
  <div class="main">
    <h1>webfont 字体预览</h1>
    <p class="web-font">主页 示例 管理</p>


    <div class="helps">
      第一步：使用font-face声明字体
      <pre>
@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
</pre>
      第二步：定义使用 webfont 的样式
      <pre>
.web-font {
    font-family: "webfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
</pre>
      第三步：为文字加上对应的样式
      <pre>
&lt;i class="web-font"&gt;主页 示例 管理&lt;/i&gt;
</pre>
    </div>

  </div>
</body>

</html>